<!DOCTYPE html>
<html>
  <head>
    <script src="../move.js"></script>
    <script>
      addEventListener('DOMContentLoaded', function(){
        move('mac')
          .duration(1000)
          .set('opacity', 1)
          .add('left', 500)
          .end();
        
        move('mac-title')
          .sub('left', 400)
          .set('opacity', 1)
          .duration(1200)
          .delay(500)
          .end();

        var purchase = move('purchase')
          .set('opacity', 1)
          .set('left', 200)
          .then()
            .set('color', '#00B7FF')
            .duration(1000)
            .pop();

        move('mac-subtitle')
          .sub('left', 400)
          .set('opacity', 1)
          .duration(1200)
          .delay(500)
          .then(purchase)
          .end();
      }, false);
    </script>

    <style>
      #mac {
        position: absolute;
        left: 100px;
        opacity: 0;
      }
      #mac-title {
        position: absolute;
        top: 200px;
        left: 600px;
        opacity: 0;
      }
      #mac-subtitle {
        position: absolute;
        top: 250px;
        left: 600px;
        opacity: 0;
      }
      #purchase {
        position: absolute;
        top: 350px;
        color: #888;
        text-decoration: none;
        font: 14px "helvetica neue", arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <img
      id="mac-title"   src="http://images.apple.com/imac/images/overview_allinone_title20110426.png">
    <img id="mac-subtitle" src="http://images.apple.com/imac/images/overview_allinone_subhead20110426.png">
    <img id="mac" src="http://images.apple.com/imac/images/overview_allinone20110426.png">

    <a href="#" id="purchase">Purchase</a>
  </body>
</html>